<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>time elements</title>
</head>
<body>
  <h2>Past Date</h2>
  <h3>Format DateTime</h3>
  <p>
    Default:
    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime">
      Jan 1 1970
    </relative-time>
  </p>

  <p>
    With time:
    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit">
      Jan 1 1970
    </relative-time>
  </p>

  <p>
    No title attribute:
    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit"
      no-title>
      Jan 1 1970
    </relative-time>
  </p>

  <p>
    Customised options:
    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" weekday="narrow" year="2-digit" month="narrow" day="numeric" hour="numeric" minute="2-digit" second="2-digit">
      Jan 1 1970
    </relative-time>
  </p>

  <h3>Format Relative</h3>
  <p>
    Default:
    <relative-time datetime="1970-01-01T00:00:00.000Z" format="relative">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Fixed to future tense:
    <relative-time datetime="1970-01-01T00:00:00.000Z" format="relative" tense="future">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <h3>Format Duration</h3>
  <p>
    Default:
    <relative-time datetime="1970-01-01T00:00:00.000Z" format="duration">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Month precision:
    <relative-time datetime="1970-01-01T00:00:00.000Z" format="duration" precision="month">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Fixed to future tense:
    <relative-time datetime="1970-01-01T00:00:00.000Z" format="duration" tense="future">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <h2>Future Date</h2>
  <h3>Format DateTime</h3>
  <p>
    Default:
    <relative-time datetime="2038-01-01T00:00:00.000Z" format="datetime">
      Jan 1 2023
    </relative-time>
  </p>

  <p>
    With time:
    <relative-time datetime="2038-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit">
      Jan 1 2023
    </relative-time>
  </p>

  <p>
    Customised options:
    <relative-time datetime="2038-01-01T00:00:00.000Z" format="datetime" weekday="narrow" year="2-digit" month="narrow" day="numeric" hour="numeric" minute="2-digit" second="2-digit">
      Jan 1 2023
    </relative-time>
  </p>

  <h3>Format Relative</h3>
  <p>
    Default:
    <relative-time datetime="2038-01-01T00:00:00.000Z" format="relative">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Fixed to past tense:
    <relative-time datetime="2038-01-01T00:00:00.000Z" format="relative" tense="past">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  <p>

  <h3>Format Duration</h3>
  <p>
    Default:
    <relative-time datetime="2038-01-01T00:00:00.000Z" format="duration">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Month precision:
    <relative-time datetime="2038-01-01T00:00:00.000Z" format="duration" precision="month">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Fixed to future tense:
    <relative-time datetime="2038-01-01T00:00:00.000Z" format="duration" tense="future">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>


  <h2>Dynamic Formats</h2>
  <p>
    Nearby, dynamic, relative time:
    <relative-time datetime="2019-08-12T20:50:00.000Z" id="dynamic1">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>


  <p>
    Nearby, dynamic, relative time:
    <relative-time datetime="2019-08-12T20:50:00.000Z" id="dynamic2">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Nearby, dynamic, relative time:
    <relative-time datetime="2019-08-12T20:50:00.000Z" tense="past" id="dynamic3">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    How long you've been on this page
    <relative-time id="dynamic4" format="elapsed">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Countdown timer until 2038 bug:
    <relative-time datetime="2038-01-19T03:14:08Z" format="elapsed">
      Oops! This browser doesn't support Web Components.
    </time-until>
  </p>

  <h2>Localised Dates</h2>
  <p>
    Localised to Polish:
    <relative-time datetime="2019-08-12T20:50:00.000Z" lang="pl" prefix="">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Localised to Hebrew with Format=DateTime
    <relative-time datetime="2019-08-12T20:50:00.000Z" format="datetime" lang="he">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Localised to French with Format=Duration
    <relative-time datetime="2019-08-12T20:50:00.000Z" format="duration" lang="fr">
      Oops! This browser doesn't support Web Components.
    </relative-time>
  </p>

  <p>
    Lazily added datetime via setAttribute
    <relative-time id="lazy" tense="past">
      This will display in one second.
    </relative-time>
  </p>

  <h2>With Aria Hidden</h2>

  <button class="js-toggle-aria-hidden">
    With aria-hidden
    <relative-time aria-hidden="true" datetime="1970-01-01T00:00:00.000Z">
    </relative-time>
  </button>

  <!-- <script type="module" src="../dist/index.js"></script> -->
  <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
  <script>
    document.body.addEventListener('relative-time-updated', event => {
      console.log('event from', event.target, event)
    });
    document.getElementById('dynamic1').date = new Date()
    document.getElementById('dynamic2').date = new Date(Date.now() - 30000)
    document.getElementById('dynamic3').date = new Date(Date.now() + 5000)
    document.getElementById('dynamic4').date = new Date()
    setTimeout(() => {
      document.getElementById('lazy').setAttribute('datetime', new Date().toJSON())
    }, 1000)

    const toggleAriaHidden = (event) => {
      const relativeTimeElement = event.currentTarget.querySelector('relative-time')
      if (relativeTimeElement.getAttribute('aria-hidden') === 'true') {
        relativeTimeElement.setAttribute('aria-hidden', 'false')
      } else {
        relativeTimeElement.setAttribute('aria-hidden', 'true')
      }
    }
    const button = document.querySelector('.js-toggle-aria-hidden')
    button.addEventListener('click', toggleAriaHidden)
  </script>
</body>
</html>
